<template>
  <transition :name="transitionName">
    <div class="back-to-ceiling">
      <div class="customer">

        <div>
          <img class="backtotopimg" @click="backToTop" src="../assets/images/ico-6.png" alt="" />
        </div>

        <div class="customer-list">
          <div>
            <img class="backtotopimg" src="../assets/images/ico-7.png" alt="" />
          </div>
          <div class="customer-list-ico">
            <div>
              <a href="https://wpa.qq.com/msgrd?v=3&amp;uin=1933777805&amp;site=qqq&amp;menu=yes" target="_blank">
                <p>客服QQ：</p>
                <p>1933777805</p>
              </a>
            </div>
            <div>
              <a href="https://wpa.qq.com/msgrd?v=3&amp;uin=1933777835&amp;site=qqq&amp;menu=yes" target="_blank">
                <p>客服QQ：</p>
                <p>1933777835</p>
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'BackToTop',
  props: {
    visibilityHeight: {
      type: Number,
      default: 400
    },
    backPosition: {
      type: Number,
      default: 0
    },
    customStyle: {
      type: Object,
      default: function () {
        return {}
      }
    },
    contactStyle: {
      type: Object,
      default: function () {
        return {}
      }
    },
    transitionName: {
      type: String,
      default: 'fade'
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      interval: null,
      isMoving: false,
      subsidiary: ''
    }
  },
  mounted () {
    //  window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy () {
    //   window.removeEventListener("scroll", this.handleScroll);
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    handleScroll () {
      //  this.visible = window.pageYOffset > this.visibilityHeight;
    },
    backToTop () {
      if (this.isMoving) return
      const start = window.pageYOffset
      let i = 0
      this.isMoving = true
      this.interval = setInterval(() => {
        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition)
          clearInterval(this.interval)
          this.isMoving = false
        } else {
          window.scrollTo(0, next)
        }
        i++
      }, 16.7)
    },
    easeInOutQuad (t, b, c, d) {
      if ((t /= d / 2) < 1) return (c / 2) * t * t + b
      return (-c / 2) * (--t * (t - 2) - 1) + b
    }
  }
}
</script>
<style lang="less" scoped>
.back-to-ceiling {
  position: fixed;
  right: 40px;
  bottom: 60px;
  text-align: right;
}
.backtotopimg {
  margin-bottom: 10px;
  cursor: pointer;
}
.customer-list {
  position: relative;
  width: 80px;
  .customer-list-ico {
    display: none;
    position: absolute;
    background: #9092a0;
    left: -95px;
    top: -60px;
    padding: 10px;
    border-radius: 5px;
    a {
      color: #fff;
      font-size: 16px;
      line-height: 30px;
      text-align: left;
    }
  }
}
.customer-list:hover {
  .customer-list-ico {
    display: block;
  }
}
</style>